import React, { useState, useEffect } from "react";
import { Image, Loading, Tag, Toast } from "antd-mobile/2x";
import { useHistory } from "react-router-dom";
import api from "../../../api/index";
import BeScroll from "../../../components/loading/index";
import NavHeader from "../../../components/NavHeader";
import "./index.scss";
const colors = ["#87d068", "#108ee9", "#2db7f5"];
export default function HomeList() {
  const [list, setList] = useState<any>([]);
  const { push } = useHistory();
  useEffect(() => {
    getList();
  }, []);
  //删除
  const delSc = (e: any, id: string) => {
    e.stopPropagation();
    api.delFavorites({ id }).then((res: any) => {
      if (res.status === 200) {
        Toast.show({
          content: res.description,
        });
        getList();
      }
    });
  };
  const getList = () => {
    api.getFavorites().then((res: any) => {
      setList([...res.body]);
    });
  };

  return (
    <div className="RecordRoomListBox">
      <NavHeader>我的收藏</NavHeader>
      <div style={{ height: "40px" }}></div>
      <div className="RecordRoomList">
        <BeScroll myClass="RecordRoom">
          <div>
            {list.length > 0 &&
              list.map((v: any, index: number) => {
                return (
                  <div
                    onClick={() => {
                      push({
                        pathname: "/details",
                        state: {
                          id: v.houseCode,
                        },
                      });
                    }}
                    className="roomList_item"
                    key={index}
                  >
                    <div className="item_img">
                      <Image
                        lazy
                        width={120}
                        height={100}
                        placeholder={<Loading />}
                        src={"http://47.102.145.189:8009" + v.houseImg}
                      />
                    </div>
                    <div className="item_content">
                      <h4>{v.title}</h4>
                      <p style={{ color: "#999", fontSize: "10px" }}>
                        {v.desc}
                      </p>
                      <p>
                        {v.tags.map((item: string, ind: number) => {
                          return (
                            <Tag
                              className="tagChild"
                              color={colors[ind]}
                              key={ind + "a"}
                            >
                              {item}
                            </Tag>
                          );
                        })}
                      </p>
                      <p className="shopBtn">
                        <p>
                          <span>{v.price}</span>源/月
                        </p>

                        <b
                          onClick={(e) => {
                            console.log(v.houseCode);
                            delSc(e, v.houseCode);
                          }}
                        >
                          删除
                        </b>
                      </p>
                    </div>
                  </div>
                );
              })}
          </div>
        </BeScroll>{" "}
      </div>
    </div>
  );
}
